<script setup>

import {Delete, Edit, View} from "@element-plus/icons-vue";
import {ref} from "vue";
import {getGroupData} from "@/api/mock";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";

//打开抽屉状态
const dialogFormVisible = ref(false);
//抽屉title
const titleName = ref('')
//表格数据
const groupListData = ref([])
//用于表单校验
const form =ref(null)
//抽屉表单字段
const formData = ref ({
  groupName:'',
  area:'',
  leader:''
})
//导入按钮的事件函数
const importGroup = ()=>{

}
//新增打开抽屉函数
const showAddDialog =(title)=>{
  titleName.value = title
  dialogFormVisible.value = true
}
//获取表格数据，利用mockjs拦截请求模拟数据
const getGroupList =()=>{
  getGroupData().then(res=>{
    if (res.status) {
      groupListData.value = res.data.tableData
    }
  })
}
getGroupList()
const router = useRouter()
const Click=()=>{
  router.push('/group/info')
  // this.$router.push({path:'/house/list'})
}
//表单规则
const rules = {
  groupName:[
    { required: true, message: '请输入招宣组', trigger: 'blur' },
    { min: 3, max: 5, message: '名字长度3-5', trigger: 'blur' },
  ],
  area:[
    { required: true, message: '请输入招宣组', trigger: 'blur' },
    { min: 3, max: 5, message: '名字长度3-5', trigger: 'blur' },
  ],
  leader:[
    { required: true, message: '请输入招宣组', trigger: 'blur' },
    { min: 3, max: 5, message: '名字长度3-5', trigger: 'blur' },
  ]

}

const addGroup = ()=>{
  form.value.validate(valid=>{
    if(valid){
      ElMessage.success("添加成功")
      dialogFormVisible.value=false
      getGroupList()
    }
  })
}

//清除抽屉表单函数
const  clear=()=>{
  formData.value={
    groupName:'',
    area:'',
    leader:''
  }
}
//编辑招宣组
const  showEditDialog = (row,title)=>{

  dialogFormVisible.value=true
  titleName.value = title
  formData.value={
    ...row
  }
}
//编辑招宣组 确认
const editGroup=()=>{
  form.value.validate(valid=>{
    if(valid){
      ElMessage.success("编辑成功")
      dialogFormVisible.value=false
    }
  })
}

const deleteById=()=>{
  ElMessageBox.confirm(
      '删除不可恢复，请确认是否删除?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage.success("删除成功")
        // ElMessage({
        //   type: 'success',
        //   message: 'Delete completed',
        // })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}
const groupName = ref('')
const userName = ref('')
const gender = ref('')
function resetParams(){
  groupName.value = ''
  gender.value = ''
  userName.value = ''
}

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>招宣组管理</span>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item >
        <el-input v-model="groupName" placeholder="请输入招宣组名字查询"></el-input>
      </el-form-item>
      <el-form-item >
        <el-select placeholder="请选择负责区域" v-model="gender">
          <el-option label="A区域" value="a"></el-option>
          <el-option label="B区域" value="b"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-input v-model="userName" placeholder="请输入姓名查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUserList">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="button1" type="primary" @click="importGroup">导入成员招宣组</el-button>
        <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">添加招宣组</el-button>
      </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="groupListData" style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="招宣组名称" width="400" prop="groupName"></el-table-column>
      <el-table-column label="负责的区域" prop="area"></el-table-column>
      <el-table-column label="组长" prop="leader"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row,'编辑招宣组')"></el-button>
          <el-button  :icon="Delete" circle plain type="danger" @click="deleteById(row.id)"></el-button>
          <el-button  :icon="View" type="primary" @click="Click"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>

  <el-drawer v-model="dialogFormVisible" direction="rtl">
    <template #title>
      <h4>{{titleName}}</h4>
    </template>
    <template #default>
      <el-form ref="form" :model="formData"  label-position="top" :rules="rules">
        <el-form-item label="招宣组" label-width="180"  prop="groupName">
          <el-input v-model="formData.groupName" autocomplete="off" placeholder="请输入招宣组" />
        </el-form-item>
        <el-form-item label="区域" label-width="180" prop="area">
          <el-input v-model="formData.area" autocomplete="off" placeholder="请输入区域" />
        </el-form-item>
        <el-form-item label="组长" label-width="180" prop="leader">
          <el-input v-model="formData.leader" autocomplete="off" placeholder="请输入组长" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="titleName==='添加招宣组'?addGroup():editGroup()">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .button1{
    width: 151px;
    height: 36px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #236cff;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #236cff;
  }
  .button2{
    width: 138px;
    height: 36px;
    border-radius: 5px;
    background: linear-gradient(130.33deg, #31efed 0%, #236cff 100%);
  }
}

</style>
